<template>
  <div class="bg-neutral-light table-collapse" @mouseenter="isHover = true" @mouseleave="isHover = false" :style="{ background: modelValue?.bgColor || 'transparent' }">
    <div :class="[modelValue?.width ? `container-content-${modelValue?.width}` : 'container-content']">
      <div
        v-if="modelValue?.seeMore"
        class="more-button"
        :class="{'collapsed': isCollapsed}"
        @click="toggleCollapse"
        role="button"
        tabindex="0"
      >
        <p class="more-button-text see-less">
          {{ isCollapsed ? '更多' : '收合' }}
        </p>
        <span class="i i-load-more i-load-more--dark"></span>
      </div>
      <div
        class="collapse"
        :class="{'show': !isCollapsed || collapsing, 'collapsing': collapsing }"
      >
        <div v-if="modelValue?.data?.length>0" class="table-header" :class="{'mt-8': modelValue?.seeMore}">
          <div class="table-header-left">
            {{modelValue?.tableHeaderLeft}}
          </div>
          <div class="table-header-right">
            {{modelValue?.tableHeaderRight}}
          </div>
        </div>
        <div v-if="modelValue?.data?.length>0" class="table-content" v-for="item in modelValue?.data" :key="item.yearName">
          <div class="table-content-left">
            <p class="tx-body-big">{{item.yearName}}</p>
          </div>
          <div class="table-content-right">
            <div class="" v-for="(detail, i) in item.collapseList" :key="detail.id">
              <TheCollapse
                :index="i+1"
                :maxIndex="item.collapseList.length"
                :collapseID="detail.id"
                :title="detail.title"
                :detail="detail.detail"
              />

            </div>
            <div v-for="detail in item.basicList" :key="detail.id">
              <p class="mt-6" :class="{'tx-h4': modelValue?.isDescription, 'tx-body-big': !modelValue?.isDescription}">{{detail.title}}</p>
            </div>
          </div>
        </div>
        <!-- <div
          v-if="tableDefault"
          class="table-content-default"
          :class="{'mt-8': modelValue?.seeMore}"
          v-html="tableDefault"
        ></div> -->
      </div>
    </div>

    <Operate v-if="!isPreview" v-model:show="isHover" @handle-edit="showSetting = true" @handle-delete="handleDelete" @handle-copy="handleCopy" @handle-paste="handlePaste"></Operate>
  </div>

  <Setting v-if="!isPreview" v-model:show="showSetting" :data="modelValue"></Setting>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { randomString } from '@/utils/common'
import TheCollapse from '@/common/TheCollapse/index.vue'
import Operate from '@/common/Operate/index.vue'
import Setting from './setting.vue'

// 定义组件名称
defineOptions({
  name: 'BasicCollapse'
})

const props = defineProps({
  modelValue: {
    type: Object,
    default: () => ({})
  },
  isPreview: {
    type: Boolean,
    default: true
  }
})

const emit = defineEmits(['update:modelValue', 'handleDelete', 'handleCopy', 'handlePaste'])

const handleInit = () => {
  if (props.modelValue && props.modelValue.data) return // 有数据不用初始化
  const data = {
    id: props.modelValue?.id || randomString(),
    type: 'BasicCollapse',
    bgColor: '',
    width: '',
    isDescription: false,
    seeMore: true,
    tableHeaderLeft: 'Year',
    tableHeaderRight: 'Reruirement',
    data: [
      {
        id: randomString(),
        yearName: '标题',
        collapseList: [
          {
            id: randomString(),
            title: '标题',
            detail: '<p>放假啊<strong>冷风机阿拉法久</strong>啊拉法基拉<em>法基啊激发对哦叫</em>哦金佛ensivelyf</p>'
          }
        ],
        basicList: [
          {
            id: randomString(),
            title: '标题',
          }
        ],
      },
      {
        id: randomString(),
        yearName: '标题',
        collapseList: [],
        basicList: [],
      }
    ],
  }
  emit('update:modelValue', data)
} 

const isHover = ref<boolean>(false);
const showSetting = ref<boolean>(false);
const isCollapsed = ref<boolean>(true);
const collapsing = ref(false);

const toggleCollapse = () => {
  isCollapsed.value = !isCollapsed.value;
  collapsing.value = true;
  // 动画时长应该与 CSS 过渡时间匹配（350ms）
  setTimeout(() => {
    collapsing.value = false;
  }, 360);
}

const handleDelete = () => {
  emit('handleDelete', props.modelValue.id)
}

const handleCopy = () => {
  emit('handleCopy', props.modelValue)
}

const handlePaste = (type: string) => {
  emit('handlePaste', type)
}

handleInit()
</script>

<style lang="scss" scoped>
/* 排版样式 */
.tx-h4,h4 {
  font-size: 24px;
  font-weight: 500;
  line-height: 1.5;
}

@media(max-width: 767.98px) {
  .tx-h4,h4 {
    font-size: 20px;
    line-height: 1.2;
    letter-spacing: -.005em;
  }
}

.tx-body-big {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .01em;
}

@media(max-width: 1023.98px) {
  .tx-body-big {
    line-height: 1.25;
    letter-spacing: .04em;
  }
}

@media(max-width: 767.98px) {
  .tx-body-big {
    font-size: 14px;
    line-height: 1.285;
    letter-spacing: .02em;
  }
}

/* 工具类 */
.d-none {
  display: none !important;
}

.d-block {
  display: block !important;
}

.mt-6 {
  margin-top: 24px !important;
}

.mt-8 {
  margin-top: 32px !important;
}

.fade:not(.show) {
  opacity: 0
}

.collapse {
  overflow: hidden;
  transition: max-height .35s ease;
  max-height: 0;
}

.collapse.show {
  max-height: 1000px;
}

.collapsing {
  max-height: 1000px;
  overflow: hidden;
  transition: max-height 1s ease;
}

@media(prefers-reduced-motion:reduce) {
  .collapse,
  .collapsing {
    transition: none;
  }

  .table-content-right-btn .icon__plus::before,
  .table-content-right-btn .icon__plus::after {
    transition: none;
  }
}

.table-collapse {
  position: relative;
}

.bg-neutral-light {
  --bs-bg-opacity: 1;
  background-color: rgba(247,247,250,var(--bs-bg-opacity))!important;
}

.more-button {
  display: flex;
  align-items: center;
  cursor: pointer;
  justify-content: center;
  padding: 12px 0;
  transition: all 0.3s ease;
  user-select: none;
}

.more-button:hover {
  opacity: 0.8;
}

.more-button:focus {
  outline-offset: 2px;
}

.more-button-text {
  color: var(--text-color--primary, #{#0032A0});
  font-weight: bold;
  font-size: 16px;
  line-height: 1.5;
}

.more-button .see-more {
  display: none;
}

.more-button .see-less {
  display: block;
}

.table-header {
  background-color: #0032A0;
  color: #fff;
  font-size: 20px;
  line-height: 24px;
  display: flex;
  padding: 10.5px 0;
}

.table-header-left {
  width: 34.1%;
  padding: 0 16px;
}

.table-header-right {
  width: 65.9%;
  padding: 0 16px;
}

.i {
  position: relative
}

.i:after,.i:before {
  content: "";
  display: inline-block;
  vertical-align: middle
}

.i-load-more {
  position: relative;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 4px;
}

.i-load-more::before {
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  width: 16px;
  height: 16px;
  content: '';
  display: inline-block;
  background: url() 50% no-repeat;
  background-size: 100% auto;
  transform: rotate(180deg);
}

@media(prefers-reduced-motion:reduce) {
  .i-load-more::before {
    transition: none;
  }
}

.collapsed .i-load-more::before {
  transform: rotate(0deg);
}

.collapsed .see-more {
  display: block;
}

.collapsed .see-less {
  display: none;
}

.more-button .see-more {
  display: none;
}

.more-button .see-less {
  display: block;
}

.table-content {
  display: flex;
  background-color: #fff;
}

.table-content:nth-child(2n) {
  background-color: #F2F8FF;
}

.table-content-default ::v-deep strong {
  color: #1A1C20;
}

.table-content-default ::v-deep tr {
  background-color: #fff !important;
}

.table-content-default ::v-deep tr:nth-child(2n) {
  background-color: #F2F8FF !important;
}

.table-content-default ::v-deep tr td {
  background-color: unset !important;
}

.table-content-left {
  width: 34.1%;
  display: flex;
  align-items: center;
  padding: 0 16px;
}

.table-content-right {
  width: 65.9%;
  padding: 46px 15.5px;
}

.table-content-right p {
  color: #0032A0;
}

.table-content-right-or {
  padding: 25px 0;
  color: var(--quote-line-color, #FF0044);
}

.table-content-right-detail ::v-deep ul {
  padding-left: 20px;
}

.table-content-right-detail ::v-deep ul > li {
  list-style: disc;
}
</style>